<template>
  <div>
		<!-- 顶栏 -->
		<div class="topbar bg-black py-2 px-3 d-flex ai-center jc-between">
      <img src="../assets/images/logo.png" height="33" />
      <div class="d-flex flex-1 px-2">
        <span class="text-white fs-lg">王者荣耀</span>
        <span class="text-white fs-lg pl-3">攻略站</span>
      </div>
      <span class="text-white">更多英雄 &gt;</span>
    </div>
    <!-- 英雄大图 -->
		<div class="top" :style="{'background': `url(${model.banner})`}">
      <div class="info text-white p-3 d-flex flex-column jc-end">
        <div class="fs-sm">{{model.title}}</div>
        <h2 class="my-2">{{model.name}}</h2>
        <div class="fs-sm">{{model.categories.map(v => v.name).join('/')}}</div>
        <div class="d-flex jc-between">
          <div class="scores d-flex ai-center pt-2 fs-sm" v-if="model.scores">
            <span>难度</span>
            <span class="bg-primary badge">{{model.scores.difficult}}</span>
            <span>技能</span>
            <span class="bg-blue badge">{{model.scores.skills}}</span>
            <span>攻击</span>
            <span class="bg-danger badge">{{model.scores.attack}}</span>
            <span>生存</span>
            <span class="bg-gray-1 badge">{{model.scores.survival}}</span>
          </div>
          <router-link to="/" tag="span" class="text-grey fs-sm">皮肤：2 &gt;</router-link>
        </div>
      </div>
    </div>
    <!-- tab栏 -->
    <div>
      <!-- 导航 -->
      <div class="px-3 bg-white">
        <div class="nav d-flex jc-around pt-3 pb-2 bottom-border">
          <div class="nav-item" :class="{active: active === 0}" @click="$refs.list.swiper.slideTo(0)">
            <div class="nav-link">英雄初识</div>
          </div>
          <div class="nav-item" :class="{active: active === 1}" @click="$refs.list.swiper.slideTo(1)">
            <div class="nav-link">进阶攻略</div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <swiper ref="list" @slide-change="() => active = $refs.list.swiper.realIndex">
        <swiper-slide>
          <div>
            <!-- 第一块（英雄技能） -->
            <div class="bg-white bottom-border">
              <!-- 按钮 -->
              <div class="p-3 d-flex jc-between">
                <router-link tag="button" to="" class="btn btn-bg flex-1">
                  <i class="iconfont icon-video"></i>
                  英雄介绍视频
                </router-link>
                <router-link tag="button" to="" class="btn btn-bg flex-1 ml-2">
                  <i class="iconfont icon-picture text-primary"></i>
                  英雄介绍视频
                </router-link>
              </div>
              <!-- 技能图片 -->
              <div class="skills my-3">
                <div class="d-flex jc-around px-3">
                  <img :src="item.icon" v-for="(item,i) in model.skills" :key="i" width="65" height="65" 
                  class="nav-item" :class="{active: currentSkillsIndex === i}" @click="currentSkillsIndex = i"
                  >
                </div>
              </div>
              <!-- 技能内容(利用计算属性) -->
              <div class="d-flex jc-start ai-center px-3" v-if="skillsIndex">
                <h3 class="mr-4 text-dark-1">{{skillsIndex.name}}</h3>
                <span class="ml-5 fs-sm text-grey">(冷却值: {{skillsIndex.delay}} 消耗：{{skillsIndex.cost}})</span>
              </div>
              <!-- 技能详情 -->
              <div v-if="skillsIndex">
                <p class="px-3 text-dark-1 mt-2">{{skillsIndex.description}}</p>
              </div>
            </div>
            <!-- 第二块（出装推荐） -->
            <m-card plain icon="wuqi" title="出装推荐">
              <div>
                <div class="fs-xl">顺风出装</div>
                <div class="d-flex jc-around bottom-border">
                  <div class="px-2 hero-items my-3" v-for="item in model.items1" :key="item._id"> 
                    <img :src="item.icon">
                    <span class="fs-xs d-flex jc-center">{{item.name}}</span>
                  </div>
                </div>
                <div class="fs-xl mt-3">逆风出装</div>
                <div class="d-flex jc-around">
                  <div class="px-2 hero-items my-3" v-for="item in model.items2" :key="item._id"> 
                    <img :src="item.icon">
                    <span class="fs-xs d-flex jc-center">{{item.name}}</span>
                  </div>
                </div>
              </div>
            </m-card>

            <m-card plain icon="jiqiao" title="使用技巧">
              <p>{{model.battleTips}}</p>
            </m-card>

            <m-card plain icon="duikang-VS" title="对抗技巧">
              <p>{{model.teamTips}}</p>
            </m-card>

            <m-card plain icon="tuanzhan-xx" title="团战思路" class="text-">
              <p>{{model.usageTips}}</p>
            </m-card>

            <m-card plain icon="card-hero" title="英雄搭档">
              <div class="fs-xl">最佳搭档</div>
              <div v-for="item in model.partners" :key="item.name" class="d-flex jc-between my-3">
                <img :src="item.hero.avatar" height="50">
                <p class="flex-1 ml-3">{{item.description}}</p>
              </div>
              <div class="fs-xl">被谁克制</div>
              <div v-for="item in model.restrain" :key="item.name" class="d-flex jc-between my-3">
                <img :src="item.hero.avatar" height="50">
                <p class="flex-1 ml-3">{{item.description}}</p>
              </div>
            </m-card>

          </div>
        </swiper-slide>

        <swiper-slide>
          <div class="text-grey text-center fs-lg mt-5">暂无进阶攻略内容</div>
        </swiper-slide>
      </swiper>
    </div>
	</div>
</template>

<script>
export default {
	props: {
		id: { required: true }	
	},
	data() {
    return {
      model: {
        categories: [],
        skills: []
      },
      currentSkillsIndex: 0,
      active: 0
    }
  },
  methods: {
    async fetch() {
      const res = await this.$http.get(`/heroes/${this.id}`)
      this.model = Object.assign({}, this.model, res.data)
    }
  },
  computed: {
    //直接根据图片相应的索引来调取相应的数据
    skillsIndex() {
      return this.model.skills[this.currentSkillsIndex]
    }
  },
  created() {
    this.fetch()
  }
}
</script>

<style lang="scss">
  .top {
    height: 48vw;
    background: #fff no-repeat top center;
    background-size: auto 100% !important;
    .info {
      height: 100%;
      background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
      .scores {
        .badge {
          width: 1rem;
          height: 1rem;
          display: inline-block;
          margin: 0 0.25rem;
          text-align: center;
          border-radius: 50%;
          font-size: 0.6rem;
          line-height: 0.9rem;
          border: 1px solid rgba(255,255,255,0.2);
        }
      }
    }
  }
  .bottom-border {
    border-bottom: 1px solid #ccc;
  }
  .skills {
    img {
      border-radius: 50%;
      border: 3px solid #fff;
      &.active {
        border-color: #db9e3f;  
      }
    }  
  }
  .hero-items {
    img {
      width: 3.4615rem;
      height: 3.4615rem;
      border-radius: 50%;
    }
  }
  p {
    margin-top: 0;
  }
</style>
